<template>
  <div class="feedback-container">
    <div class="app-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>意见反馈</span>
        </div>

        <el-form
          :model="dataForm"
          :rules='dataRules'
          ref="dataForm"
          label-width="50px"
        >
          <el-form-item
            label="标题"
            prop='title'
          >
            <el-input
              v-model.trim="dataForm.title"
              placeholder="请输入标题"
              clearable
              maxlength="50"
              show-word-limit
              @keyup.enter.native="feedbackFn()"
            ></el-input>

          </el-form-item>

          <el-form-item
            label="内容"
            prop='content'
          >
            <el-input
              type="textarea"
              :rows="15"
              maxlength="200"
              show-word-limit
              placeholder="请输入内容"
              v-model.trim="dataForm.content"
              clearable
              @keyup.enter.native="feedbackFn()"
            >
            </el-input>
          </el-form-item>

          <div class="btn">
            <el-button
              type="primary"
              @click="feedbackFn()"
            >提交意见反馈</el-button>
          </div>
        </el-form>

      </el-card>
    </div>
  </div>
</template>

<script>
import { addFeedbackAPI } from '@/api'
export default {
  name: 'myFeedback',
  data () {
    return {
      dataForm: {
        title: '',
        content: ''
      },
      dataRules: {
        title: [
          { required: true, message: '标题不能为空！', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            type: 'string',
            message: '标题要求1-50个字符',
            trigger: 'blur'
          }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          {
            min: 5,
            type: 'string',
            message: '内容要求最少10个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 提交意见反馈 -> 点击事件 -> 发送请求
    async feedbackFn () {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          try {
            const { success, code } = await addFeedbackAPI(this.dataForm)
            if (success && code === 10000) {
              success && this.$refs.dataForm?.resetFields()
            }
          } catch (err) {
            return console.dir(err)
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  margin-top: 20px;
  text-align: center;
}
</style>
